// 获取文章的请求参数
let params = {
  pagenum: 1, // 表示页码值，即获取第 n 页的数据
  pagesize: 2, // 表示每页显示几条数据
}

// ---------------------------- 获取文章列表，渲染 ------------------------

// 封装函数，获取文章，渲染到tbody中
function renderArticle() {
  axios.get('/my/article/list', { params }).then(res => {
    console.log(res.data);
    let { status, data, total } = res.data;
    if (status === 0) {
      let str = '';
      data.forEach(item => {
        str += `<tr>
            <td>${item.title}</td>
            <td>${item.cate_name}</td>
            <td>${item.pub_date}</td>
            <td>${item.state}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs">编辑</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>`;
      });
      $('tbody').html(str);
      // 处理完数据，调用分页函数
      showPage(total);
    }
  });
}

renderArticle();

/*********    定义showPage函数   **********/
// 实现分页
let laypage = layui.laypage;

function showPage(t) {
  laypage.render({
    elem: 'page', // 不要加 #
    count: t, // 表示总计有多少条数据
    limit: params.pagesize, // 每页显示多少条
    limits: [2, 3, 4, 5],//下拉框的选项
    curr: params.pagenum, //  起始页（控制页码的背景色，表示是选中状态）
    // prev: '上一个'
    layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'],
    // 点击页码的时候，会触发下面的jump函数。页面刷新之后，也会触发一次
    jump: function (obj, first) {
      // console.log(obj); // 表示前面控制分页的所有属性
      // console.log(first); // 刷新页面之后，是tru，再点击页码，它就是undefined了
      // 点击页码的时候，jump函数会触发，此时，改变data.pagesize和data.pagenum，调用renderArticle即可看对对应页的数据
      //首次不执行
      if (!first) {
        // console.log(obj.curr);
        //表示当前页,以便向服务器端请求对应页的数据
        //得到每页显示的条数
        params.pagenum = obj.curr;
        params.pagesize = obj.limit;
        renderArticle();
      }
    }
  });
}


//------------------------筛选-----------------
// 获取真实的分类
axios.get('/my/category/list').then(res => {
  let { status, data } = res.data;
  if (status === 0) {
    // console.log(data);
    let str = '';
    data.forEach(item => {
      str += `<option value="${item.id}">${item.name}</option>`;
    })
    $('#category').append(str);
    // 更新渲染
    let form = layui.form;
    form.render('select');
  }
})

// 完成筛选
$('#search').on('submit', function (e) {
  e.preventDefault();
  // 获取下拉框的两个值
  let cate_id = $('#category').val();
  let state = $('#state').val();
  // console.log(cate_id, state);
  // 设置请求参数
  if (cate_id) {
    params.cate_id = cate_id;
  } else {
    delete params.cate_id; // delete用于删除对象的属性
  }

  if (state) {
    params.state = state;
  } else {
    delete params.state;
  }

  // 筛选的时候，重置pagenum=1
  params.pagenum = 1;

  // 发送请求，获取文章
  renderArticle();
})
